<template>
  <view class="conter">
    <!-- <top-tabbar tabTitle="学习报告" @click="backClick"></top-tabbar> -->
    <view class="main">
      <!-- 练习情况 -->
      <view class="exercise">
        <view class="hrader-title">
          <view class="logo-incon">
            <view class="iconfont-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/course/Component%20185.png"></image></view>
          </view>
          <view class="title">练习情况</view>
        </view>
        <view class="round-bar">
          <view class="item-box">
            <view class="arprog-icon">
              <arprogress :percent="fromData.percent" activeColor="#16EA6B"><text style="font-size: 40rpx;font-weight: 500;color: #16EA6B;">{{ fromData.listexercise[0].exerciseValues }}</text></arprogress>
              <view class="query-title">
                <view>{{fromData.listexercise[0].exerciseName}}</view>
                <view class="iconfont hint" @click="hintClick(fromData.listexercise[0].exerciseTis)">&#xe602;</view>
              </view>
            </view>
            <view class="arprog-icon">
               <arprogress :percent="arprog" activeColor="#FFD234"><text style="font-size: 40rpx;font-weight: 500;color:#FFD234;">{{ fromData.listexercise[1].exerciseValues }}</text></arprogress>
               <view class="query-title">
                 <view>{{fromData.listexercise[1].exerciseName}}</view>
                 <view class="iconfont hint"  @click="hintClick(fromData.listexercise[1].exerciseTis)">&#xe602;</view>
               </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 知识梗要 -->
      <view class="knowledge">
        <view class="hrader-title">
          <view class="logo-incon">
            <view class="iconfont-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/course/Component%20182.png"></image></view>
          </view>
          <view class="title">知识梗要</view>
        </view>
        <view class="round-bar">
          <view class="text-up" v-for="(item,index) in fromData.knowledgeList" :key="index">
            <view>{{ item }}</view>
            <view class="iconfont upicon">&#xe68a;</view>
          </view>
        </view>
      </view>
      <!-- 能力提升 -->
      <view class="capacity-lift">
        <view class="hrader-title">
          <view class="logo-incon">
            <view class="iconfont-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/course/Component%20186.png"></image></view>
          </view>
          <view class="title">能力提升</view>
        </view>
        <view class="round-bar">
          <view class="capac-lift-list" v-for="item in capacityliftList" :key="index">
            <view class="capacity-img"><image :src="item.capactiyImage"></image></view>
            <view class="progress">
              <view class="progress-title">
                <view>{{ item.capacityName }}</view>
                <view class="subTitle">学习<text style="color:#FF800C">{{ item.allKnowLedgePoints }}</text>个知识</view>
              </view>
              <progress active :percent="item.percentage" :duration="10" stroke-width="8" font-size="12" activeColor="#BF99FE"/>
            </view>
            <view class="amount">{{item.comKnowledgePoints}}/{{item.allKnowLedgePoints}}</view>
          </view>
        </view>
      </view>
      <!-- 本课小结 -->
      <view class="my-score">
        <view class="hrader-title">
          <view class="logo-incon">
            <view class="iconfont-img"><image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/course/Component%20187.png"></image></view>
          </view>
          <view class="title">本课小结</view>
        </view>
        <view class="letter-score">
          <image src="../../../static/my/unsele_circle.png"></image>
          <image v-if="fromData.letter=== 'A'" class="altve-img" src="../../../static/my/altve_circle_p2.png"></image>
          <image v-else class="altve-img" src="../../../static/my/altve_circle.png"></image>
          <view class="step-score">
            <view class="letter">{{ fromData.letter }}</view>
            <view class="evaluate">综合评价</view>
          </view>
        </view>
        <view class="defeat">击败了<text class="percent">{{ fromData.defeatPercentage }}%</text>的同龄人</view>
        <view class="bottom-title">{{ fromData.honorName }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  import topTabbar from '@/components/topTabbar/index.vue'
  import arprogress from '@/components/ar-circle-progress/index.vue'
  import { courseDetail } from '@/utils/api.js' // 接口api
  export default{
    components: { topTabbar, arprogress },
    data() {
      return {
        fromData:{
          listexercise:[],
          percent:'', // 答题掌握度
          second:'', // 搭建时间
          letter: "", // 评分
          defeatPercentage: '', // 评价百分比
          honorName: '', // 评价名称
          knowledgeList:[], // 知识能力
        },
        fromDetail:{ // 详情参数
          roleId:'3a0025ae-6a2e-4c1c-fe3b-db5e8d2f7672', // 角色id
          seriesId:'',
          courseId:'',
        },
        list: [],
        capacityliftList:[], // 能力提升数据
        arprog: 100,
        percent: 55,
      }
    },
    onLoad(params) {
      if (params) {
        this.fromDetail.seriesId = params.seriesId
        this.fromDetail.courseId = params.courseId
        this.getReport()
      }
      this.friendShare()
    },
    methods:{
      // 获取报告详情
      async getReport(seriesId,courseId) {
        const res = await courseDetail(this.fromDetail)
        if( res.code === 0) {
          this.fromData.letter = res.result.report.evaluateGrade // 评分字母赋值
          this.fromData.defeatPercentage = res.result.report.defeatPercentage // 评分百分比赋值
          this.fromData.honorName = res.result.report.honorName // 评分称号赋值
          this.fromData.knowledgeList = res.result.report.knowledgeTag.split(';') // 知识梗要字符转换数组
          this.fromData.percent = res.result.report.exerciseValue.split(';')[0] // 答题掌握度
          this.fromData.second = res.result.report.exerciseValue.split(';')[1] // 搭建时间
          this.fromData.listexercise = res.result.listexercise
          this.capacityliftList = res.result.listcapacity
          this.capacityliftList.forEach(item => {
            item.percentage = item.comKnowledgePoints / item.allKnowLedgePoints*100
          })
        }
      },
      // 提示
      hintClick(title) {
         uni.showToast({  title, icon:'none' })
      },
      // 分享好友
      friendShare() {
        this.$wechat.share({ // 权限注入与分享
          title: '大爆炸思维学习报告',
          desc: '你编程用时已超过95%的小伙伴，再接再厉！',
          imgUrl: 'https://img-qn-1.51miz.com/preview/muban/00/00/62/67/M-626796-301FC6AF.jpg!/quality/90/unsharp/true/compress/true/fh/400'
        })
      },
      // 返回上一页
      backClick() {
        uni.navigateBack({})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main{
    padding-bottom: 150rpx;
    color: #262626;
    // 练习情况
    .exercise{
      width: 670rpx;
      height: auto;                   
      background: #FFFFFF;
      box-shadow: 0px 8rpx 40rpx rgba(0, 0, 0, 0.08);
      border-radius: 40rpx;
      margin: auto;
      margin-top: 32rpx;
    .hrader-title{
      display: flex;
      align-items: center;
      .logo-incon{
        width: 100rpx;
        height: 64rpx;
        background: linear-gradient(180deg, #FFD234 0%, #FF800C 100%);
        border-radius: 40rpx 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont-img{
          width: 48rpx;
          height: 48rpx;
        }
      }
      .title{
        font-size: 32rpx;
        color: #262626;
        margin-left: 28rpx;
      }
    }
      .round-bar{
        padding: 44rpx 60rpx;
        .item-box{
          display: flex;
          // align-items: center;
          justify-content: space-between;
          .arprog-icon{
            display: flex;
            flex-direction: column;
            align-items: center;
            // justify-content: space-between;
            font-size: 24rpx;
            color: #262626;
            .query-title{
              display: flex;
              align-items: center;
               .hint{
                font-size: 40rpx;
                color: #EEEEEE;
                margin-left: 8rpx;
              }
            }
          }
        }
      }
    }
    // 知识纪要
    .knowledge{
      width: 670rpx;
      height: auto;                   
      background: #FFFFFF;
      box-shadow: 0px 8rpx 40rpx rgba(0, 0, 0, 0.08);
      border-radius: 40rpx;
      margin: auto;
      margin-top: 32rpx;
      .hrader-title{
        display: flex;
        align-items: center;
        .logo-incon{
          width: 100rpx;
          height: 64rpx;
          background: linear-gradient(180deg, #FFD234 0%, #FF800C 100%);
          border-radius: 40rpx 0px;
          display: flex;
          align-items: center;
          justify-content: center;
          .iconfont-img{
            width: 48rpx;
            height: 48rpx;
          }
        }
        .title{
          font-size: 32rpx;
          color: #262626;
          margin-left: 28rpx;
        }
      }
        .round-bar{
          padding: 44rpx 24rpx 32rpx 24rpx;
          width: 100%;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .text-up{
            width: 176rpx;
            height: 48rpx;
            border-radius: 24rpx;
            background-color: #f6f0ff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #262626;
            margin: 0 46rpx 16rpx 0;
            .upicon{
              color:#FF800C;
            }
          }
          .text-up:nth-child(3n){
            margin-right: 0;
          }
        }
    }
    // 能力提升
    .capacity-lift{
      width: 670rpx;
      height: auto;                   
      background: #FFFFFF;
      box-shadow: 0px 8rpx 40rpx rgba(0, 0, 0, 0.08);
      border-radius: 40rpx;
      margin: auto;
      margin-top: 32rpx;
      .hrader-title{
        display: flex;
        align-items: center;
        .logo-incon{
          width: 100rpx;
          height: 64rpx;
          background: linear-gradient(180deg, #FFD234 0%, #FF800C 100%);
          border-radius: 40rpx 0px;
          display: flex;
          align-items: center;
          justify-content: center;
          .iconfont-img{
            width: 48rpx;
            height: 48rpx;
          }
        }
        .title{
          font-size: 32rpx;
          color: #262626;
          margin-left: 28rpx;
        }
      }
      .round-bar{
        padding: 44rpx 52rpx 0rpx 32rpx;
        width: 100%;
        .capac-lift-list{
          display: flex;
          align-items: center;
          justify-content: center;
          // justify-content: flex-start;
          padding-bottom: 32rpx;
          .capacity-img{
            width: 64rpx;
            height: 64rpx;
          }
          .progress{
            width: 392rpx;
            margin: 0 16rpx 0rpx 30rpx;
            /deep/ .uni-progress-bar{
              border-radius: 8rpx !important;
              .uni-progress-inner-bar{
              	border-radius: 8rpx !important;
              }
            }
            .progress-title{
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 24rpx;
              color: #262626;
              .subTitle{
                 font-size: 20rpx;
                 color: #8C8C8C;
              }
            }
          }
          .amount{
            width: 60rpx;
            margin-top: 30rpx;
            font-size: 20rpx;
            color: #8C8C8C;
          }
        }
      }
    }
    // 本课小结
    .my-score{
      width: 670rpx;
      height: 514rpx;                   
      background: #FFFFFF;
      box-shadow: 0px 8rpx 40rpx rgba(0, 0, 0, 0.08);
      border-radius: 40rpx;
      margin: auto;
      margin-top: 32rpx;
      .hrader-title{
        display: flex;
        align-items: center;
        .logo-incon{
          width: 100rpx;
          height: 64rpx;
          background: linear-gradient(180deg, #FFD234 0%, #FF800C 100%);
          border-radius: 40rpx 0px;
          display: flex;
          align-items: center;
          justify-content: center;
          .iconfont-img{
            width: 48rpx;
            height: 48rpx;
          }
        }
        .title{
          font-size: 32rpx;
          color: #262626;
          margin-left: 28rpx;
        }
      }
      .letter-score{
        width: 268.7rpx;
        height: 231.8rpx;
        margin: 40rpx auto;
        position: relative;
        .altve-img{
          position: absolute;
          top: 0;
          left: 0;
        }
        .step-score{
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          text-align: center;
          .letter{
            font-weight: bold;
            font-size: 120rpx;
            background: linear-gradient(180deg, #FFD234 0%, #FF800C 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-top: -50rpx;
          }
          .evaluate{
            font-size: 24rpx;
            color: #FF800C;
          }
        }
      }
      .defeat{
        color: #595959;
        font-size: 12px;
        width: 272rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        border-radius: 32rpx;
        background: #EEEEEE;
        margin: auto;
        .percent{
          font-size: 28rpx;
          font-weight: bold;
          color: #FF800C;
        }
      }
      .bottom-title{
        font-size: 24rpx;
        color: #FF800C;
        text-align: center;
        margin-top: 8rpx;
      }
    }
  }
</style>
